<template>
  <div>
    <div id="components-form-demo-advanced-search">
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          仓库名称：<a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.warehousingId"
            allowClear
          >
            <a-select-option
              :value="item.warehouseId"
              v-for="item in warehouse"
              :key="item.warehouseId"
            >
              {{ item.titleName }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          工单编号：<a-input :maxLength="128" v-model="searchData.workNo" style="width: 60%" />
        </a-col>
        <a-col :span="6">
          是否加急：<a-select v-model="searchData.isUrgent" style="width: 60%">
            <a-select-option value="1"> 加急 </a-select-option>
            <a-select-option value="0"> 普通 </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <div v-show="!expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getTabList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
          <div v-show="expand">
            创建时间：<a-range-picker
              v-model="acTime"
              @change="onStartDateChange"
              style="width: 60%"
            />
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-show="expand">
        <a-col :span="6">
          客户编号：<a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.tenantId"
          >
            <a-select-option
              :value="item.tenantId"
              v-for="item in accArray"
              :key="item.id"
              :titles="item.title"
            >
              {{ item.companyName + "/" + item.tenantId }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <div v-show="expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getTabList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
        </a-col>
        <a-col :span="6"> </a-col>
        <a-col :span="6"> </a-col>
      </a-row>
    </div>
    <div class="btn" style="display: flex; margin-top: 10px">
      <div class="news">
        <a-button
          type="primary"
          class="blueBtn"
          @click="showOrderModal"
          style="
            background: #66b1ff;
            color: #fff;
            border: none;
            margin-left: 8px;
            margin-right: 20px;
          "
        >
          新建工单
        </a-button>
      </div>
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-tabs default-active-key="5" @change="callback">
        <a-tab-pane key="5">
          <span slot="tab">
            <a-badge
              :count="countObj === null ? 0 : countObj.workProcessed"
              :offset="[15, 0]"
              >待处理
            </a-badge>
          </span>
          <OrderTable
            v-if="tabKey === '5'"
            :getTabList="getTabList"
            :tableList="tableList"
            :tabKey="tabKey"
          />
        </a-tab-pane>
        <a-tab-pane key="15">
          <span slot="tab">
            <a-badge
              :count="countObj === null ? 0 : countObj.workWaitDispose"
              :offset="[15, 0]"
              >待仓库处理
            </a-badge>
          </span>
          <OrderTable
            v-if="tabKey === '15'"
            :getTabList="getTabList"
            :tableList="tableList"
            :tabKey="tabKey"
          />
        </a-tab-pane>
        <a-tab-pane key="45">
          <span slot="tab">
            <a-badge
              :count="countObj === null ? 0 : countObj.waitConfirm"
              :offset="[15, 0]"
              >待客服确认
            </a-badge>
          </span>
          <OrderTable
            v-if="tabKey === '45'"
            :getTabList="getTabList"
            :tableList="tableList"
            :tabKey="tabKey"
          />
        </a-tab-pane>
        <a-tab-pane key="25">
          <span slot="tab">
            <a-badge
              :count="countObj === null ? 0 : countObj.workWaitProcessed"
              :offset="[15, 0]"
              >待结算
            </a-badge>
          </span>
          <OrderTable
            v-if="tabKey === '25'"
            :getTabList="getTabList"
            :tableList="tableList"
            :tabKey="tabKey"
          />
        </a-tab-pane>
        <a-tab-pane key="35">
          <span slot="tab">
            <a-badge
              :count="countObj === null ? 0 : countObj.workWaitShipped"
              :offset="[15, 0]"
              >已完成
            </a-badge>
          </span>
          <OrderTable
            v-if="tabKey === '35'"
            :getTabList="getTabList"
            :tableList="tableList"
            :tabKey="tabKey"
          />
        </a-tab-pane>
      </a-tabs>
    </a-spin>

    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-pagination
        :current="searchData.current"
        show-size-changer
        :pageSizeOptions="['10', '20', '30']"
        :show-total="
          (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
        "
        @showSizeChange="showChange"
        :buildOptionText="
          (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
        "
        show-quick-jumper
        :default-current="searchData.current"
        :total="total"
        @change="onChangePage"
      />
    </div>

    <OrderModal
      :tabKey="tabKey"
      :warehouse="warehouse"
      :treatmentArray="treatmentArray"
      :accArray="accArray"
      :getTabList="getTabList"
      ref="OrderModal"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import OrderTable from "@/components/system/WorkOrder/OrderTable.vue";
import OrderModal from "@/components/system/WorkOrder/OrderModal.vue";
import { treeTagDictionary } from "@/apis/common";
import {
  workOrder_page,
  workOrder_workCount,
} from "@/apis/system/workOrder/workOrder";
export default {
  components: {
    OrderTable,
    OrderModal,
  },
  created() {
    this.getTreeTagDictionary();
    this.getTabList();
  },
  data() {
    return {
      //表格数据
      tableList: [],
      //处理类型数组
      treatmentArray: [],
      spinning: false,
      acTime: null,
      expand: false,
      searchData: {
        current: 1,
        size: 10,
        workState: "5",
        warehousingId: null,
        startDate: null,
        endtDate: null,
        workNo: null,
        isUrgent: null,
        // startDate: null,
        // endtDate: null,
      },
      tabKey: "5",
      total: 1,
      countObj: {},
    };
  },
  methods: {
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getTabList();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getTabList();
    },
    showOrderModal() {
      this.$refs.OrderModal.shwoModal();
    },
    callback(key) {
      this.searchData.current = 1;
      // this.searchData.size=10;
      this.searchData.workState = key;
      this.tabKey = key;
      this.getTabList();
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //时间查询
    onStartDateChange(date, dateString) {
      this.searchData.startDate = dateString[0];
      this.searchData.endtDate = dateString[1];
    },
    async getTreeTagDictionary() {
      let { code, responseBody } = await treeTagDictionary({
        tagType: 9,
      });
      if (code === "200") {
        this.treatmentArray = responseBody;
      }
    },
    async getTabList() {
      this.spinning = true;
      let { code, responseBody } = await workOrder_page(this.searchData);
      if (code === "200") {
        this.tableList = responseBody.records;
        this.total = responseBody.total * 1;
        this.getCount();
        this.spinning = false;
      }
    },
    //重置按钮
    resetSearch() {
      this.searchData = {
        current: 1,
        size: 10,
        workState: this.tabKey,
        warehousingId: null,
        startDate: null,
        endtDate: null,
        workNo: null,
        isUrgent: null,
        tenantId: null,
        // startDate: null,
        // endtDate: null,
      };
      this.acTime = null;
      this.getTabList();
    },
    async getCount() {
      let { code, responseBody } = await workOrder_workCount();
      if (code === "200") {
        this.countObj = responseBody === null ? null : responseBody[0];
      }
    },
  },
  computed: {
    ...mapState(["warehouse"]),
    ...mapState(["accArray"]),
  },
};
</script>

<style lang="less" scoped>
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
</style>